<template>
  <div class="search-container">
    <el-input
      v-model="input"
      placeholder="请输入名称"
      class="search-input"
      :class="{ focused: isFocused }"
      @focus="isFocused = true"
      @blur="isFocused = false"
    >
      <template #prepend>
        <el-icon @click="toggleFocus"><Search></Search></el-icon>
      </template>
    </el-input>
  </div>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { Search } from '@element-plus/icons-vue';
  const input = ref('');
  const isFocused = ref(false);
  const toggleFocus = () => {
    isFocused.value = !isFocused.value;
  };
</script>

<style lang="scss" scoped>
  .search-container {
    width: 50px;
    transition: width 0.5s ease-in-out;
  }

  .search-input {
    width: 100%;
  }

  .focused {
    width: 300px;
  }
</style>
